<template>
  <i
    :class="iconClass"
    :style="iconStyle"
  />
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  name: {
    type: String,
    required: true
  },
  size: {
    type: [String, Number],
    default: '1em'
  },
  color: {
    type: String,
    default: 'currentColor'
  }
})

// Font Awesome 6图标映射表
const iconMap = {
  // AI相关图标
  'robot': 'fa-solid fa-robot',
  'ai': 'fa-solid fa-brain',
  'chat': 'fa-solid fa-comments',
  'question': 'fa-solid fa-circle-question',
  'search': 'fa-solid fa-magnifying-glass',
  'book': 'fa-solid fa-book',
  'lightbulb': 'fa-solid fa-lightbulb',
  'scenario': 'fa-solid fa-masks-theater',
  'explain': 'fa-solid fa-book-open',
  'analyze': 'fa-solid fa-chart-line',
  'suggest': 'fa-solid fa-wand-magic-sparkles',
  
  // 用户相关
  'user': 'fa-solid fa-user',
  'avatar': 'fa-solid fa-user-circle',
  
  // 操作相关
  'send': 'fa-solid fa-paper-plane',
  'close': 'fa-solid fa-xmark',
  'minimize': 'fa-solid fa-minus',
  'expand': 'fa-solid fa-plus',
  'maximize': 'fa-solid fa-expand',
  'copy': 'fa-solid fa-copy',
  'clear': 'fa-solid fa-trash-can',
  'refresh': 'fa-solid fa-arrows-rotate',
  'check': 'fa-solid fa-check',
  
  // 状态相关
  'success': 'fa-solid fa-circle-check',
  'error': 'fa-solid fa-circle-xmark',
  'warning': 'fa-solid fa-triangle-exclamation',
  'info': 'fa-solid fa-circle-info',
  'loading': 'fa-solid fa-spinner fa-spin',
  
  // 导航相关
  'home': 'fa-solid fa-house',
  'back': 'fa-solid fa-arrow-left',
  'forward': 'fa-solid fa-arrow-right',
  'up': 'fa-solid fa-arrow-up',
  'down': 'fa-solid fa-arrow-down',
  'chevron-left': 'fa-solid fa-chevron-left',
  'chevron-right': 'fa-solid fa-chevron-right',
  'chevron-up': 'fa-solid fa-chevron-up',
  'chevron-down': 'fa-solid fa-chevron-down',
  
  // 功能相关
  'favorite': 'fa-solid fa-heart',
  'favorite-outline': 'fa-regular fa-heart',
  'star': 'fa-solid fa-star',
  'star-outline': 'fa-regular fa-star',
  'share': 'fa-solid fa-share-nodes',
  'download': 'fa-solid fa-download',
  'upload': 'fa-solid fa-upload',
  'edit': 'fa-solid fa-pen-to-square',
  'delete': 'fa-solid fa-trash',
  'settings': 'fa-solid fa-gear',
  'filter': 'fa-solid fa-filter',
  'sort': 'fa-solid fa-sort'
}

const iconClass = computed(() => {
  // 获取Font Awesome类名,如果不存在则使用默认问号图标
  const faClass = iconMap[props.name] || 'fa-solid fa-circle-question'
  return `icon ${faClass}`
})

const iconStyle = computed(() => {
  return {
    fontSize: typeof props.size === 'number' ? `${props.size}px` : props.size,
    color: props.color
  }
})
</script>

<style scoped>
.icon {
  display: inline-block;
  line-height: 1;
  vertical-align: middle;
}
</style>
